<template>
	<view class="container">
		<!-- 结果概览 -->
		<view class="result-header" :class="{'pass': isPassed, 'fail': !isPassed}">
			<view class="result-status">{{isPassed ? '考试通过' : '考试未通过'}}</view>
			<view class="score">{{formatScore(examResult.score)}} 分</view>
			<view class="result-info">
				<text>总题数：{{examResult.total_questions}}题</text>
				<text>正确数：{{examResult.correct_count}}题</text>
				<text>用时：{{formatTime(examResult.used_time)}}</text>
			</view>
		</view>
		
		<!-- 分析统计 -->
		<view class="analysis-section">
			<view class="section-title">考试分析</view>
			<view class="analysis-chart">
				<view class="chart-item">
					<view class="chart-value">{{getCorrectRate()}}%</view>
					<view class="chart-label">正确率</view>
				</view>
				<view class="chart-item">
					<view class="chart-value">{{getWrongCount()}}题</view>
					<view class="chart-label">错误</view>
				</view>
				<view class="chart-item">
					<view class="chart-value">{{formatAvgTime(examResult.avg_time_per_question)}}秒</view>
					<view class="chart-label">平均用时</view>
				</view>
			</view>
		</view>
		
		<!-- 题目答案 -->
		<view class="questions-section">
			<view class="section-title">答题详情</view>
			<view class="question-list">
				<view 
					class="question-item" 
					v-for="(item, index) in processedQuestions" 
					:key="index"
					:class="{'correct': item.is_correct, 'wrong': !item.is_correct}"
				>
					<view class="question-header">
						<view class="question-index">第 {{index + 1}} 题</view>
						<view class="question-status">{{item.is_correct ? '正确' : '错误'}}</view>
					</view>
					<view class="question-content">
						<text class="question-type">[{{getQuestionType(item.type)}}]</text>
						<text class="question-text">{{item.title}}</text>
					</view>
					
					<!-- 题目媒体内容显示 -->
					<view class="question-media" v-if="item.media && item.media.length > 0">
						<view v-for="(media, mediaIndex) in item.media" :key="mediaIndex" class="media-item">
							<!-- 图片内容 -->
							<image v-if="media.type === 'image'" class="media-image" :src="media.url" mode="widthFix" @click="previewImage(media.url)"></image>
							
							<!-- 视频内容 -->
							<video v-if="media.type === 'video'" class="media-video" :src="media.url" controls></video>
						</view>
					</view>
					
					<!-- 选项 -->
					<view v-if="item.type === 'single' || item.type === 'multiple'">
						<view 
							class="option-item" 
							v-for="(option, optionIndex) in parseOptions(item.options)" 
							:key="optionIndex"
							:class="{
								'user-selected': isOptionSelected(item, optionIndex),
								'correct-option': isCorrectOption(item, optionIndex) && !isWrongSelection(item, optionIndex),
								'wrong-selection': isWrongSelection(item, optionIndex),
								'missed-selection': isMissedSelection(item, optionIndex)
							}"
						>
							<text class="option-letter">{{getOptionLetter(optionIndex)}}</text>
							<text class="option-text">{{option}}</text>
							<!-- 用户选择错误的选项 -->
							<view class="option-icon" v-if="isWrongSelection(item, optionIndex)">
								<text class="wrong-icon">✕</text>
							</view>
							<!-- 正确答案 -->
							<view class="option-icon" v-else-if="isCorrectOption(item, optionIndex)">
								<text class="correct-icon">✓</text>
							</view>
						</view>
						
						<!-- 显示错误提示 -->
						<view class="error-tip" v-if="!item.is_correct">
							<text class="error-tip-text">您选择的答案不正确</text>
						</view>
					</view>
					
					<!-- 判断题 -->
					<view class="judgment-options" v-if="item.type === 'judgment' || item.type === 'judge'">
						<view class="judgment-wrapper">
							<view 
								class="judgment-option" 
								:class="{
									'user-selected': isJudgmentSelected(item, true),
									'correct-option': isJudgmentCorrect(item, true) && !isWrongJudgmentSelection(item, true),
									'wrong-selection': isWrongJudgmentSelection(item, true),
									'missed-selection': isMissedJudgmentSelection(item, true)
								}"
							>
								<text class="judgment-text">正确</text>
								<!-- 用户错误选择 -->
								<view class="option-icon" v-if="isWrongJudgmentSelection(item, true)">
									<text class="wrong-icon">✕</text>
								</view>
								<!-- 正确答案 -->
								<view class="option-icon" v-else-if="isJudgmentCorrect(item, true)">
									<text class="correct-icon">✓</text>
								</view>
							</view>
							<view 
								class="judgment-option" 
								:class="{
									'user-selected': isJudgmentSelected(item, false),
									'correct-option': isJudgmentCorrect(item, false) && !isWrongJudgmentSelection(item, false),
									'wrong-selection': isWrongJudgmentSelection(item, false),
									'missed-selection': isMissedJudgmentSelection(item, false)
								}"
							>
								<text class="judgment-text">错误</text>
								<!-- 用户错误选择 -->
								<view class="option-icon" v-if="isWrongJudgmentSelection(item, false)">
									<text class="wrong-icon">✕</text>
								</view>
								<!-- 正确答案 -->
								<view class="option-icon" v-else-if="isJudgmentCorrect(item, false)">
									<text class="correct-icon">✓</text>
								</view>
							</view>
						</view>
						
						<!-- 显示错误提示 -->
						<view class="error-tip" v-if="!item.is_correct">
							<text class="error-tip-text">您选择的答案不正确</text>
						</view>
					</view>
					
					<!-- 解析 -->
					<view class="question-explanation" v-if="item.explanation">
						<text class="explanation-title">解析：</text>
						<text class="explanation-content">{{item.explanation}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<button class="btn-primary" @click="retakeExam">重新考试</button>
			<button class="btn-outline" @click="backToList">返回列表</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordId: '',
				examId: '',
				examResult: {
					exam_id: '',
					title: '',
					score: 0,
					pass_score: 0,
					total_questions: 0,
					correct_count: 0,
					used_time: 0,
					avg_time_per_question: 0,
					questions: []
				}
			}
		},
		computed: {
			isPassed() {
				return this.examResult.score >= this.examResult.pass_score;
			},
			
			// 确保用户正确选择了正确答案时显示为正确
			processedQuestions() {
				if (!this.examResult.questions || !Array.isArray(this.examResult.questions)) {
					return [];
				}
				
				// 返回处理过的题目数据，确保状态正确
				return this.examResult.questions.map(q => {
					// 处理用户答案正确性的判断
					let isCorrect = false;
					
					if (q.type === 'single') {
						// 单选题 - 直接比较数字索引
						isCorrect = Number(q.correct_option) === Number(q.user_answer);
					} else if (q.type === 'multiple') {
						// 多选题 - 数组比较
						if (Array.isArray(q.correct_options) && Array.isArray(q.user_answer)) {
							if (q.correct_options.length === q.user_answer.length) {
								// 排序并转换为数字后比较
								const sortedCorrect = [...q.correct_options].map(Number).sort((a, b) => a - b);
								const sortedUser = [...q.user_answer].map(Number).sort((a, b) => a - b);
								isCorrect = sortedCorrect.every((val, idx) => val === sortedUser[idx]);
							}
						}
					} else if (q.type === 'judgment' || q.type === 'judge') {
						// 判断题 - 布尔值比较
						let correct = Boolean(q.correct_option);
						let user;
						
						if (typeof q.user_answer === 'string') {
							user = q.user_answer.toLowerCase() === 'true' || q.user_answer === '1';
						} else if (typeof q.user_answer === 'number') {
							user = q.user_answer !== 0;
						} else {
							user = Boolean(q.user_answer);
						}
						
						isCorrect = correct === user;
					}
					
					// 返回处理后的题目，覆盖is_correct属性
					return {
						...q,
						is_correct: isCorrect
					};
				});
			}
		},
		onLoad(options) {
			console.log('接收到的页面参数:', options);
			
			// 获取考试记录ID
			let recordId = null;
			
			// 1. 直接从options获取recordId
			if (options.recordId && typeof options.recordId === 'string') {
				recordId = options.recordId;
			}
			// 2. 从id参数获取
			else if (options.id && typeof options.id === 'string') {
				recordId = options.id;
			}
			
			// 检查recordId格式
			if (!recordId || typeof recordId !== 'string' || recordId.length !== 24) {
				console.error('无效的考试记录ID:', recordId);
				uni.showModal({
					title: '提示',
					content: '无效的考试记录ID，请返回重试',
					showCancel: false,
					success: () => {
						uni.navigateBack();
					}
				});
				return;
			}
			
			this.recordId = recordId;
			console.log('使用的考试记录ID:', this.recordId);
			
			// 获取考试ID
			if (options.examId) {
				this.examId = options.examId;
				console.log('从参数获取到考试ID:', this.examId);
			}
			
			// 获取考试结果
			this.getExamResult();
		},
		methods: {
			// 获取考试结果
			async getExamResult() {
				if (!this.recordId) {
					console.error('缺少考试记录ID');
					return;
				}
				
				uni.showLoading({
					title: '加载中...'
				});
				
				console.log('开始获取考试记录，ID:', this.recordId);
				
				try {
					const examService = uniCloud.importObject('exam-service');
					const res = await examService.getExamResult(this.recordId);
					
					console.log('获取考试结果完整返回:', res);
					uni.hideLoading();
					
					if (res.code === 0 && res.data) {
						// 检查返回的数据结构
						if (!res.data.questions || !Array.isArray(res.data.questions)) {
							console.error('返回的题目数据格式错误');
							throw new Error('题目数据格式错误');
						}
						
						// 处理时间数据
						const data = {
							...res.data,
							used_time: this.normalizeTimeValue(res.data.used_time),
							avg_time_per_question: this.normalizeTimeValue(res.data.avg_time_per_question)
						};
						
						// 确保题目数据格式正确
						data.questions = data.questions.map(question => {
							// 确保选项格式正确
							if (question.options && typeof question.options === 'string') {
								try {
									question.options = JSON.parse(question.options);
								} catch (e) {
									console.warn('选项格式转换失败:', e);
								}
							}
							
							// 确保用户答案格式正确
							if (question.type === 'multiple' && question.user_answer && typeof question.user_answer === 'string') {
								try {
									question.user_answer = JSON.parse(question.user_answer);
								} catch (e) {
									console.warn('用户答案格式转换失败:', e);
									question.user_answer = [];
								}
							}
							
							// 确保正确答案格式正确
							if (question.type === 'multiple' && question.correct_options && typeof question.correct_options === 'string') {
								try {
									question.correct_options = JSON.parse(question.correct_options);
								} catch (e) {
									console.warn('正确答案格式转换失败:', e);
									question.correct_options = [];
								}
							}
							
							// 处理判断题答案
							if (question.type === 'judgment' || question.type === 'judge') {
								if (typeof question.correct_option === 'string') {
									question.correct_option = question.correct_option.toLowerCase() === 'true' || question.correct_option === '1';
								}
								if (typeof question.user_answer === 'string') {
									question.user_answer = question.user_answer.toLowerCase() === 'true' || question.user_answer === '1';
								}
							}
							
							return question;
						});
						
						// 更新考试结果数据
						this.examResult = {
							...data,
							recordId: this.recordId,
							exam_id: data.exam_id || this.examId
						};
						
						// 更新统计信息
						this.updateExamStats();
						
						// 保存到本地缓存，用于恢复
						try {
							uni.setStorageSync('lastExamResult', JSON.stringify({
								recordId: this.recordId,
								examId: this.examId,
								result: this.examResult
							}));
							
							// 设置刷新标记，通知考试列表页面需要刷新
							uni.setStorageSync('exam_list_need_refresh', true);
						} catch (e) {
							console.error('保存考试结果到缓存失败:', e);
						}
					} else {
						console.error('获取考试结果失败:', res.message || '未知错误', res);
						uni.showModal({
							title: '获取考试结果失败',
							content: res.message || '请重试',
							showCancel: false
						});
					}
				} catch (err) {
					console.error('获取考试结果出错:', err);
					uni.hideLoading();
					
					// 显示错误提示
					uni.showModal({
						title: '提示',
						content: err.message || '获取考试结果失败，请重试',
						showCancel: false,
						success: () => {
							uni.navigateBack();
						}
					});
				}
			},
			
			// 标准化时间值
			normalizeTimeValue(time) {
				if (typeof time === 'number') {
					return time;
				}
				if (typeof time === 'string') {
					const parsed = parseInt(time);
					return isNaN(parsed) ? 0 : parsed;
				}
				return 0;
			},
			
			// 更新考试统计信息
			updateExamStats() {
				// 如果没有题目，不更新
				if (!this.examResult.questions || !Array.isArray(this.examResult.questions)) {
					console.warn('没有题目数据，跳过统计更新');
					return;
				}
				
				// 计算正确数量和总分
				let correctCount = 0;
				let totalScore = 0;
				let totalPossibleScore = 0;
				
				this.examResult.questions.forEach(question => {
					// 累加题目总分
					const questionScore = Number(question.score) || 0;
					totalPossibleScore += questionScore;
					
					// 判断答案是否正确并计算得分
					let isCorrect = false;
					if (question.type === 'single') {
						isCorrect = Number(question.correct_option) === Number(question.user_answer);
					} else if (question.type === 'multiple') {
						if (Array.isArray(question.correct_options) && Array.isArray(question.user_answer)) {
							if (question.correct_options.length === question.user_answer.length) {
								const sortedCorrect = [...question.correct_options].map(Number).sort((a, b) => a - b);
								const sortedUser = [...question.user_answer].map(Number).sort((a, b) => a - b);
								isCorrect = sortedCorrect.every((val, idx) => val === sortedUser[idx]);
							}
						}
					} else if (question.type === 'judgment' || question.type === 'judge') {
						const correctBool = Boolean(question.correct_option);
						let userBool;
						if (typeof question.user_answer === 'string') {
							userBool = question.user_answer.toLowerCase() === 'true' || question.user_answer === '1';
						} else if (typeof question.user_answer === 'number') {
							userBool = question.user_answer !== 0;
						} else {
							userBool = Boolean(question.user_answer);
						}
						isCorrect = correctBool === userBool;
					}
					
					// 更新统计
					if (isCorrect) {
						correctCount++;
						totalScore += questionScore;
					}
					
					// 更新题目的正确性标记
					question.is_correct = isCorrect;
				});
				
				// 更新统计数据
				this.examResult = {
					...this.examResult,
					correct_count: correctCount,
					total_questions: this.examResult.questions.length,
					score: totalScore,
					total_score: totalPossibleScore,
					pass_score: this.examResult.pass_score || Math.floor(totalPossibleScore * 0.6) // 如果没有设置及格分，默认60%
				};
				
				console.log('更新后的考试统计:', {
					总题数: this.examResult.total_questions,
					正确数: this.examResult.correct_count,
					得分: this.examResult.score,
					总分: this.examResult.total_score,
					及格分: this.examResult.pass_score
				});
			},
			
			// 获取正确率
			getCorrectRate() {
				if (this.examResult.total_questions === 0) {
					return 0;
				}
				return Math.round((this.examResult.correct_count / this.examResult.total_questions) * 100);
			},
			
			// 获取错误题目数量
			getWrongCount() {
				return this.examResult.total_questions - this.examResult.correct_count;
			},
			
			// 格式化分数显示
			formatScore(score) {
				if (typeof score !== 'number') return '0';
				return score.toString();
			},
			
			// 格式化时间显示
			formatTime(seconds) {
				if (!seconds || typeof seconds !== 'number') {
					// 尝试转换字符串时间为数字
					if (typeof seconds === 'string') {
						seconds = parseInt(seconds);
					}
					if (isNaN(seconds)) {
						return '0秒';
					}
				}
				
				if (seconds >= 3600) {
					const hours = Math.floor(seconds / 3600);
					const minutes = Math.floor((seconds % 3600) / 60);
					const remainingSeconds = Math.floor(seconds % 60);
					return `${hours}小时${minutes}分${remainingSeconds}秒`;
				} else if (seconds >= 60) {
					const minutes = Math.floor(seconds / 60);
					const remainingSeconds = Math.floor(seconds % 60);
					return `${minutes}分${remainingSeconds}秒`;
				} else {
					return `${Math.floor(seconds)}秒`;
				}
			},
			
			// 格式化平均用时
			formatAvgTime(seconds) {
				if (!seconds || typeof seconds !== 'number') {
					// 尝试转换字符串时间为数字
					if (typeof seconds === 'string') {
						seconds = parseInt(seconds);
					}
					if (isNaN(seconds)) {
						return '0';
					}
				}
				return Math.round(seconds);
			},
			
			// 获取题目类型文本
			getQuestionType(type) {
				switch(type) {
					case 'single':
						return '单选题';
					case 'multiple':
						return '多选题';
					case 'judgment':
						return '判断题';
					case 'judge':
						return '判断题';
					default:
						return '';
				}
			},
			
			// 获取选项字母
			getOptionLetter(index) {
				return String.fromCharCode(65 + index);
			},
			
			// 判断选项是否被用户选中
			isOptionSelected(question, optionIndex) {
				console.log(`检查选项是否被选中 - 题目类型:${question.type}, 索引:${optionIndex}, 用户答案:${JSON.stringify(question.user_answer)}`);
				
				if (question.type === 'single') {
					// 单选题 - 使用0-based索引
					return Number(question.user_answer) === Number(optionIndex);
				} else if (question.type === 'multiple') {
					// 多选题 - 使用0-based索引数组
					if (Array.isArray(question.user_answer)) {
						return question.user_answer.some(ans => Number(ans) === Number(optionIndex));
					}
				}
				return false;
			},
			
			// 判断选项是否是正确答案
			isCorrectOption(question, optionIndex) {
				console.log(`检查选项是否是正确答案 - 题目类型:${question.type}, 索引:${optionIndex}, 正确答案:${JSON.stringify(question.correct_option || question.correct_options)}`);
				
				if (question.type === 'single') {
					// 单选题 - 使用0-based索引
					return Number(question.correct_option) === Number(optionIndex);
				} else if (question.type === 'multiple') {
					// 多选题 - 使用0-based索引数组
					if (Array.isArray(question.correct_options)) {
						return question.correct_options.some(ans => Number(ans) === Number(optionIndex));
					}
				}
				return false;
			},
			
			// 判断选项是否是错误选择（用户选了但不正确）
			isWrongSelection(question, optionIndex) {
				// 用户选择了该选项
				const isSelected = this.isOptionSelected(question, optionIndex);
				// 该选项是否正确
				const isCorrect = this.isCorrectOption(question, optionIndex);
				
				// 用户选了，但是不正确
				return isSelected && !isCorrect;
			},
			
			// 判断选项是否是漏选项（用户没选但应该选）
			isMissedSelection(question, optionIndex) {
				// 用户没选该选项
				const isNotSelected = !this.isOptionSelected(question, optionIndex);
				// 该选项是否正确
				const isCorrect = this.isCorrectOption(question, optionIndex);
				
				// 是正确选项但用户没选
				return isNotSelected && isCorrect;
			},
			
			// 解析选项格式，确保返回字符串数组
			parseOptions(options) {
				if (!options) return [];
				
				// 确保选项数据格式一致性
				if (Array.isArray(options)) {
					if (options.length > 0 && typeof options[0] === 'object' && options[0].content !== undefined) {
						// 新格式选项，包含content字段
						return options.map(opt => opt.content);
					}
					// 旧格式选项，直接是字符串数组
					return options;
				}
				return [];
			},
			
			// 重新考试
			retakeExam() {
				if (this.examId) {
					uni.navigateTo({
						url: `/packageExam/exam/exam-page?id=${this.examId}`
					});
				} else {
					uni.switchTab({
						url: '/pages/exam/exam'
					});
				}
			},
			
			// 返回列表
			backToList() {
				uni.switchTab({
					url: '/pages/exam/exam'
				});
			},
			
			// 判断判断题选项是否被选中
			isJudgmentSelected(question, value) {
				console.log(`判断题选项是否被选中: 值=${value}, 用户答案=${JSON.stringify(question.user_answer)}`);
				
				// 统一使用布尔值比较
				const userBool = typeof question.user_answer === 'boolean' ? question.user_answer :
					(question.user_answer === 'true' || question.user_answer === '1' || question.user_answer === 1);
				return value === userBool;
			},
			
			// 判断判断题选项是否正确
			isJudgmentCorrect(question, value) {
				if (question.type === 'judgment' || question.type === 'judge') {
					return Boolean(question.correct_option) === Boolean(value);
				}
				return false;
			},
			
			// 判断判断题选项是否为错误选择
			isWrongJudgmentSelection(question, value) {
				// 用户选择了此选项
				const isSelected = this.isJudgmentSelected(question, value);
				// 该选项是否正确
				const isCorrect = this.isJudgmentCorrect(question, value);
				
				// 用户选了，但是不正确
				return isSelected && !isCorrect;
			},
			
			// 判断判断题选项是否为漏选
			isMissedJudgmentSelection(question, value) {
				// 用户没选此选项
				const isNotSelected = !this.isJudgmentSelected(question, value);
				// 此选项是否正确
				const isCorrect = this.isJudgmentCorrect(question, value);
				
				// 是正确选项但用户没选
				return isNotSelected && isCorrect;
			},
			
			// 预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					current: url
				});
			},
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #F8F8F8;
		padding-bottom: 120rpx; /* 为底部按钮留出空间 */
	}
	
	/* 结果头部样式 */
	.result-header {
		padding: 60rpx 40rpx;
		text-align: center;
		color: #FFFFFF;
	}
	
	.result-header.pass {
		background-color: #007F4F;
	}
	
	.result-header.fail {
		background-color: #FF5151;
	}
	
	.result-status {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.score {
		font-size: 80rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	
	.result-info {
		display: flex;
		justify-content: space-around;
	}
	
	.result-info text {
		font-size: 24rpx;
		opacity: 0.8;
	}
	
	/* 分析统计样式 */
	.analysis-section {
		margin: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
		padding-left: 20rpx;
		border-left: 6rpx solid #007F4F;
	}
	
	.analysis-chart {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}
	
	.chart-item {
		text-align: center;
	}
	
	.chart-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #007F4F;
		margin-bottom: 10rpx;
	}
	
	.chart-label {
		font-size: 24rpx;
		color: #666666;
	}
	
	/* 题目答案样式 */
	.questions-section {
		margin: 30rpx;
	}
	
	.question-list {
		margin-top: 20rpx;
	}
	
	.question-item {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.question-item.correct {
		border-left: 6rpx solid #007F4F;
	}
	
	.question-item.wrong {
		border-left: 8rpx solid #FF3131;
	}
	
	.question-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	
	.question-index {
		font-size: 28rpx;
		color: #666666;
	}
	
	.question-status {
		font-size: 28rpx;
	}
	
	.question-item.correct .question-status {
		color: #007F4F;
	}
	
	.question-item.wrong .question-status {
		color: #FF3131;
		font-weight: bold;
	}
	
	.question-content {
		margin-bottom: 20rpx;
	}
	
	.question-type {
		font-size: 26rpx;
		color: #666666;
		margin-right: 10rpx;
	}
	
	.question-text {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.5;
	}
	
	.option-item {
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
		margin-bottom: 10rpx;
		border-radius: 6rpx;
		background-color: #F8F8F8;
	}
	
	.option-letter {
		width: 40rpx;
		font-size: 26rpx;
		color: #666666;
	}
	
	.option-text {
		font-size: 26rpx;
		color: #333333;
		flex: 1;
	}
	
	.user-selected {
		background-color: rgba(255, 81, 81, 0.25);
		border: 2rpx solid #FF5151;
	}
	
	.correct-option {
		background-color: rgba(0, 127, 79, 0.25);
		border: 2rpx solid #007F4F;
	}
	
	.user-selected.correct-option {
		background-color: rgba(0, 127, 79, 0.25);
		border: 2rpx solid #007F4F;
	}
	
	.option-icon {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}
	
	.correct-icon {
		color: #FFFFFF;
		font-weight: bold;
		font-size: 24rpx;
		background-color: #007F4F;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 36rpx;
	}
	
	.wrong-icon {
		color: #FFFFFF;
		font-weight: bold;
		font-size: 24rpx;
		background-color: #FF3131;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 36rpx;
	}
	
	.judgment-options {
		display: flex;
		flex-direction: column;
		margin: 20rpx 0;
	}
	
	.judgment-wrapper {
		display: flex;
		justify-content: space-around;
	}
	
	.judgment-option {
		position: relative;
		padding: 0 20rpx;
		width: 280rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #F8F8F8;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.judgment-text {
		font-size: 26rpx;
		color: #333333;
	}
	
	.question-explanation {
		margin-top: 20rpx;
		padding: 15rpx;
		background-color: rgba(0, 127, 79, 0.05);
		border-radius: 6rpx;
	}
	
	.explanation-title {
		font-size: 26rpx;
		color: #007F4F;
		font-weight: bold;
	}
	
	.explanation-content {
		font-size: 26rpx;
		color: #666666;
		line-height: 1.5;
	}
	
	/* 底部按钮样式 */
	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.bottom-buttons button {
		flex: 1;
		margin: 0 10rpx;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.btn-primary {
		background-color: #007F4F;
		color: #FFFFFF;
	}
	
	.btn-outline {
		background-color: #FFFFFF;
		color: #007F4F;
		border: 1rpx solid #007F4F;
	}
	
	/* 添加到style样式中 */
	.option-item, .judgment-option {
		position: relative;
	}
	
	/* 用户选择的样式调整 */
	.user-selected {
		background-color: rgba(255, 81, 81, 0.25);
		border: 2rpx solid #FF5151;
	}
	
	.correct-option {
		background-color: rgba(0, 127, 79, 0.25);
		border: 2rpx solid #007F4F;
	}
	
	.user-selected.correct-option {
		background-color: rgba(0, 127, 79, 0.25);
		border: 2rpx solid #007F4F;
	}
	
	.option-icon {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}
	
	.correct-icon {
		color: #FFFFFF;
		font-weight: bold;
		font-size: 24rpx;
		background-color: #007F4F;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 36rpx;
	}
	
	.wrong-icon {
		color: #FFFFFF;
		font-weight: bold;
		font-size: 24rpx;
		background-color: #FF3131;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 36rpx;
	}
	
	/* 错误选择更明显 */
	.wrong-selection {
		background-color: rgba(255, 81, 81, 0.3);
		border: 2rpx solid #FF3131;
		position: relative;
	}
	
	.wrong-selection::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 8rpx;
		background-color: #FF3131;
	}
	
	/* 漏选项目样式 */
	.missed-selection {
		background-color: rgba(255, 193, 7, 0.2);
		border: 2rpx dashed #FFC107;
	}
	
	/* 错误提示 */
	.error-tip {
		margin-top: 10rpx;
		padding: 8rpx 16rpx;
		background-color: rgba(255, 81, 81, 0.1);
		border-left: 8rpx solid #FF3131;
		border-radius: 4rpx;
	}
	
	.error-tip-text {
		font-size: 24rpx;
		color: #FF3131;
	}
	
	/* 强化错误状态 */
	.question-item.wrong .question-status {
		color: #FF3131;
		font-weight: bold;
	}
	
	/* 题目媒体样式 */
	.question-media {
		margin: 20rpx 0 30rpx;
	}
	
	.media-item {
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.media-image {
		width: 100%;
		max-height: 400rpx;
		display: block;
	}
	
	.media-video {
		width: 100%;
		height: 400rpx;
	}
</style> 